<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <div class="item-title">时间</div>
      <draggable v-model="theFirstColumn" @remove="removeHandle" :options="dragOptions">
        <transition-group tag="div" id="theFirstColumn" class="item-ul">
          <div v-for="(item,index) in theFirstColumn" class="drag-list" :key="index">
            <el-input v-model="item.content"></el-input>
          </div>
        </transition-group>
      </draggable>
    </el-col>
    <el-col :span="6">
      <div class="item-title">学校</div>
      <draggable v-model="theSecondColumn" @remove="removeHandle" :options="dragOptions">
        <transition-group tag="div" id="theSecondColumn" class="item-ul">
          <div v-for="(item,index) in theSecondColumn" class="drag-list" :key="index">
            <el-input v-model="item.content"></el-input>
          </div>
        </transition-group>
      </draggable>
    </el-col>
    <el-col :span="6">
      <div class="item-title">专业</div>
      <draggable v-model="theThreeColumn" @remove="removeHandle" :options="dragOptions">
        <transition-group tag="div" id="theThreeColumn" class="item-ul">
          <div v-for="(item,index) in theThreeColumn" class="drag-list" :key="index">
            <el-input v-model="item.content"></el-input>
          </div>
        </transition-group>
      </draggable>
    </el-col>
    <el-col :span="6">
      <div class="item-title">学历</div>
      <draggable v-model="theFourColumn" @remove="removeHandle" :options="dragOptions">
        <transition-group tag="div" id="theFourColumn" class="item-ul">
          <div v-for="(item,index) in theFourColumn" class="drag-list" :key="index">
            <el-input v-model="item.content"></el-input>
          </div>
        </transition-group>
      </draggable>
    </el-col>
  </el-row>
</template>

<script>
  import draggable from 'vuedraggable'

  export default {
    components: {draggable},
    data() {
      return {
        dragOptions: {
          animation: 120,
          scroll: true,
          group: 'sortlist',
          ghostClass: 'ghost-style'
        },
        theFirstColumn: [
          {
            content: '2016-05-01'
          },
          {
            content: '2016-05-02'
          },
          {
            content: '2016-05-03'
          }
        ],
        theSecondColumn: [
          {
            content: '王小虎1'
          },
          {
            content: '王小虎2'
          },
          {
            content: '王小虎3'
          },
          {
            content: '王小虎4'
          }
        ],
        theThreeColumn: [
          {
            content: '上海市普陀区金沙江路 1 弄'
          },
          {
            content: '上海市普陀区金沙江路 2 弄'
          }
        ],
        theFourColumn: [
          {
            content: '上海市普陀区金沙江路 1 弄'
          },
          {
            content: '上海市普陀区金沙江路 2 弄'
          }
        ],
      }
    },
    methods: {
      removeHandle(event) {
        console.log(event);
        this.$message.success(`从 ${event.from.id} 移动到 ${event.to.id} `);
      }
    }
  }

</script>

<style scoped>
  .item-title {
    padding: 8px 8px 8px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #24292e;
    font-weight: bold;
    text-align: center;
  }

  .item-ul {
    padding: 0 8px 8px;
    height: 500px;
    overflow-y: scroll;
  }

  .item-ul::-webkit-scrollbar {
    width: 0;
  }

  .drag-list {
    padding: 10px;
    margin: 5px 0 10px;
    list-style: none;
    background-color: #fff;
    border-radius: 6px;
    cursor: pointer;
    -webkit-transition: border .3s ease-in;
    transition: border .3s ease-in;
  }
</style>
